<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { toast } from '@/uni_modules/uview-plus'
// 数据
const data = reactive({
  index: null,
  list: [],
})
onLoad(options => {
  data.list = JSON.parse(options.list) || []
})
function selectCoupon() {
  if (data.index == null) return toast('请选择优惠券！')
  const pages = getCurrentPages();
  // 获取上一个页面实例
  const prevPage = pages[pages.length - 2];
  if (prevPage) {
    // 给上个页面传递数据
    prevPage.couponInfo = data.lsit[data.index];
  }
  uni.navigateBack();
}
</script>

<template>
  <view class="select-coupon-page">

    <!-- 空状态 -->
    <up-empty v-if="data.list.length <= 0" mode="coupon" text="没有优惠券" marginTop="200rpx"></up-empty>
    <view v-else class="coupon-list">
      <up-radio-group v-model="data.index" placement="column" inactiveColor="#666666" activeColor="#FFC870">
        <view v-for="(item, index) in data.list" :key="item" class="coupon-item">
          <view class="left">
            <view class="amount-box">
              <view class="amount">
                <text class="unit">¥</text>
                <text class="num">{{ item.discountPrice }}</text>
              </view>
              <view class="desc">
                满¥{{ item.discountPrice }}可用
              </view>
            </view>
            <view class="line"></view>
            <view class="info">
              <view class="name">{{ item.name }}</view>
              <view class="expire-time">{{ item.validEndTime }}到期</view>
            </view>
          </view>
          <up-radio label="" :name="index">
          </up-radio>
        </view>
      </up-radio-group>
    </view>
    <view v-if="data.list.length > 0" class="btn-box">
      <u-button type="primary" size="large" @click="selectCoupon">完成</u-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.select-coupon-page {
  padding: 40rpx;
  min-height: 100vh;
  background: #F9F9F9;

  // 列表
  & .coupon-list {
    padding-bottom: 100rpx;

    & .coupon-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx;
      padding-left: 40rpx;
      margin-bottom: 30rpx;
      background: #FFFFFF;
      border-radius: 10rpx;

      & .left {
        display: flex;
        align-items: center;

        // 价格+ 规则描述
        & .amount-box {
          text-align: center;

          & .amount {
            & .unit {
              font-weight: 500;
              font-size: 28rpx;
              color: #F1B14B;
            }

            & .num {
              padding-left: 4rpx;
              font-weight: 500;
              font-size: 40rpx;
              color: #F1B14B;
            }
          }

          & .desc {
            margin-top: 10rpx;
            font-weight: 500;
            font-size: 26rpx;
            color: #F1B14B;
          }
        }

        // 线
        & .line {
          margin: 0 40rpx;
          width: 0rpx;
          height: 102rpx;
          border: 1rpx solid;
          border-image: linear-gradient(180deg, rgba(241, 177, 75, 0), rgba(241, 177, 75, 1), rgba(241, 177, 75, 0)) 2 2;
        }

        // 优惠券信息
        & .info {
          & .name {
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          & .expire-time {
            margin-top: 10rpx;
            font-weight: 400;
            font-size: 22rpx;
            color: #666666;
          }
        }
      }
    }
  }

  // 按钮
  & .btn-box {
    position: fixed;
    bottom: 68rpx;
    left: 0;
    right: 0;
    margin: auto;
    width: 690rpx;
    height: 100rpx;

    &::v-deep .u-button {
      width: 690rpx;
      height: 100rpx;
      background: #FFA618;
      border: none;
      border-radius: 50rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
    }
  }
}
</style>